<template>
  <div class="app-container">
    <el-form ref="dataForm" :model="dynamicValidateForm" :rules="rules" label-position="right" label-width="80px"
             style="width: 400px; margin: 0 auto;"
    >
      <el-form-item :inline="true" label="房间编号" prop="room_id">
        <el-input v-model="dynamicValidateForm.room_id" placeholder="请输入房间编号"
                  style="display:inline-block;width:200px;margin-right:20px"
        />
        <span>{{ roomName }}</span>
      </el-form-item>
      <el-form-item
        v-for="(domain, index) in dynamicValidateForm.domains"
        :key="index"
        :label="'域名' + (index+1)"
      >
        <el-form-item
          :prop="'domains.' + index + '.coin_min'"
          :rules="{
                    required: true, message: '请输入正确内容', trigger: 'blur'
                    }"
        >
          <el-input v-model="domain.coin_min"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="domain.coin_max"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="domain.rate"></el-input>
        </el-form-item>
        <el-button @click.prevent="removeDomain(domain)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="addDomain">新增域名</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roomName: '胡图图',
      dynamicValidateForm: {
        domains: [{
          rate: '',
          coin_min: '',
          coin_max: ''
        }],
        room_id: ''
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain(item) {
      let index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
    }
  }
}
</script>

<style>

</style>
